<%@page contentType="text/html"%>
<%@page pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <link rel="stylesheet" type="text/css" href="css/index.css"/>
		<link rel="stylesheet" type="text/css" href="css/common.css"/>
		<link rel="stylesheet" href="css/Cooldog.css">
        <link rel="stylesheet" href="css/iconfont.css">
		<script type="text/javascript" src="js/jquery.min.js"></script>
        <script type="text/javascript" src="js/Cooldog.js"></script>
    </head>
    	<body>
		<!--header 开始-->
		<div id="header">
			<div id="header-top">
				<div id="header-top-container">
					<div id="header-top-left">
						<span>欢迎来到 ShoesCatNS！</span>
						<a href="${pageContext.request.contextPath }/regist.jsp">[注册]</a>
						<span class="line">|</span>
						<a href="${pageContext.request.contextPath }/login.jsp">[登录]</a>
					</div>
					<div id="header-top-right">
						<ul>
							<li>
								<a href="#">订单查询</a>
						        <span class="line">|</span>
							</li>
							<li>
								<a href="#">购物车</a>
						        <span class="line">|</span>
							</li>
							<li class="center-box">
								<a href="#">客服中心</a>
								<div id="centerservise">
									<a href="">帮助中心</a>
									<a href="">我要反馈 </a>
								</div>
							</li>
						</ul>
					</div>
				</div>
			</div>
			<!--header-top 结束-->
			<!--header-middle开始-->
			<div id="header-middle">
				<img  src="img/tubiao.jpg"style="width: 244px;"/>
				<div id="search_box">
					<form action="" method="post">
					   <input type="text" name="search" id="search" value="" />
					   <input type="submit"id="search-button" value="搜索" style="font-size: 20px;font-weight: 600;"/>
					</form>	
					<div id="inco">
						<div >
					    	<a href="#">男鞋区</a>
					    </div>
						<img src="img/boy.ico"/>
					    
					</div>
					<div id ="hotsearch">
						<ul>
							<li>
								<div class="hotsearch_list">
									<a href="#">帆布鞋</a>
								</div>
							</li>
							<li>
								<div class="hotsearch_list">
									<a href="#">女单鞋</a>
								</div>
							</li><li>
								<div class="hotsearch_list">
									<a href="#">小白鞋</a>
								</div>
							</li>
							<li>
								<div class="hotsearch_list">
									<a href="#">椰子鞋</a>
								</div>
							</li>
							<li>
								<div class="hotsearch_list">
									<a href="#">Vans独角兽</a>
								</div>
							</li>
							<li>
								<div class="hotsearch_list">
									<a href="#">老爷鞋女</a>
								</div>
							</li>
							<li>
								<div class="hotsearch_list">
									<a href="#">马丁靴女</a>
								</div>
							</li>
							<li>
								<div class="hotsearch_list">
									<a href="#">板鞋女</a>
								</div>
							</li>
						</ul>
					</div>
			</div>
			</div>
			<!--header-middlej结束-->
			<!--header-bottom开始-->
			<div id ="header-bottom">
				<div id="category">
					<ul>
					<%-- <c:forEach items="${class }" var="p">
						<div class ="block">
							<a href="#" class="category_a">${p.cname }</a>
						</div>
					</c:forEach> --%>
						<!-- <li>
							<div class ="block">
								<a href="#" class="category_a">单鞋</a>
							    <div class="category_1">
							    	<div class="category_1_son">
							        	<a href="">深口</a>
							    	</div>
							    	<div class="category_1_son">
							        	<a href="">平底 </a>
							    	</div>
							    	<div class="category_1_son">
							        	<a href="">厚底</a>
							    	</div>
							    	<div class="category_1_son">
							        	<a href="">高跟</a>
							    	</div>
							    	<div class="category_1_son">
							        	<a href="">中跟</a>
							    	</div>
							    	<div class="category_1_son">
							        	<a href="">坡跟</a>
							    	</div>
							    	<div class="category_1_son">
							        	<a href="">尖头</a>
							    	</div>
							    	<div class="category_1_son">
							        	<a href="">圆头</a>
							    	</div>
							    </div>
							</div>
						</li> -->
					</ul>
				</div>
			</div>
			<!--header-bottom结束-->
		</div>
		<!--header 结束-->
		<div id="main">
			<div id= "main_top">
				<div id ="main_top_left">
					<div style="height: 21px;">热卖品牌</div>
					<ul>
						<li>
							<a href="#">达芙妮</a>
						</li>
						<li>
							<a href="#">古奇天伦</a>
						</li><li>
							<a href="#">卓诗尼</a>
						</li><li>
							<a href="#">大东</a>
						</li><li>
							<a href="#">kiss cat</a>
						</li><li>
							<a href="#">DOMS</a>
						</li><li>
							<a href="#">欧黛尔</a>
						</li><li>
							<a href="#">涉趣</a>
						</li><li>
							<a href="#">红蜻蜓</a>
						</li>
					</ul>
				</div>
			    <div id=main_top_middle>
			    	<div class="Cooldog_container">
    					<div class="Cooldog_content">
        					<ul>
            					<li class="p1">
					                <a href="#">
					                    <img src="images/1.png" alt="">
					                </a>
					            </li>
					            <li class="p2">
					                <a href="#">
					                    <img src="images/2.png" alt="">
					                </a>
					            </li>
					            <li class="p3">
					                <a href="#">
					                    <img src="images/3.png" alt="">
					                </a>
					            </li>
					            <li class="p4">
					                <a href="#">
					                    <img src="images/4.png" alt="">
					                </a>
					            </li>
					            <li class="p5">
					                <a href="#">
					                    <img src="images/5.png" alt="">
					                </a>
					            </li>
					            <li class="p6">
					                <a href="#">
					                    <img src="images/6.png" alt="">
					                </a>
					            </li>
					            <li class="p7">
					                <a href="#">
					                    <img src="images/7.png" alt="">
					                </a>
					            </li>
					        </ul>
					    </div>
					    <a href="javascript:;" class="btn_left">
					        <i class="iconfont icon-zuoyoujiantou"></i>
					    </a>
					    <a href="javascript:;" class="btn_right">
					        <i class="iconfont icon-zuoyoujiantou-copy-copy"></i>
					    </a>
					    <div class="buttons clearfix">
					        <a href="javascript:;" class="color"></a>
					        <a href="javascript:;"></a>
					        <a href="javascript:;"></a>
					        <a href="javascript:;"></a>
					        <a href="javascript:;"></a>
					        <a href="javascript:;"></a>
					        <a href="javascript:;"></a>
					    </div>
					</div>
			    </div>
			</div>
			<div id="main_middle">
				<div style="margin: 10px;font-size: 20px;"><h4>当季流行款</h4></div>
				<div id="popular">
					<div class="popular1">
						<div class="popular2">
							
						</div>
						<div class="popular3">
							
						</div>
					</div>
					<div class="popular1">
						<div class="popular2">
							
						</div>
						<div class="popular3">
							
						</div>
					</div>
					<div class="popular1">
						<div class="popular2">
							
						</div>
						<div class="popular3">
							
						</div>
					</div>
					<div class="popular1">
						<div class="popular2">
							
						</div>
						<div class="popular3">
							
						</div>
					</div>
					<div class="popular1">
						<div class="popular2">
							
						</div>
						<div class="popular3">
							
						</div>
					</div>
				</div>
				<div style="margin: 10px;font-size: 20px;"><h4>青春品牌</h4></div>
				<div id="brand">
					<div id="brand1">
						<div id="brand1_1">
							<img src="img/brand.PNG" style="width: 100%;height: 100%;"/>
						</div>
						<div id="brand1_2">
							
						</div>
						<div id="brand1_3">
							
						</div>
						<div id="brand1_4">
							
						</div>
					</div>
					<div id="brand2">
						
					</div>
					<div id="brand3">
						
					</div>
					<div id="brand4">
						<div id="brand4_1">
							
						</div>
						<div id="brand4_2">
							
						</div>
						
					</div>
				</div>
				<div style="margin: 10px;font-size: 20px;"><h4>名媛风</h4></div>
				<div id="noble">
					<div id="noble1">
						<div class="noble_1">
							
						</div>
						<div class="noble_2">
							
						</div>
					</div>
					<div id="noble2">
						<div class="noble_1">
							
						</div>
						<div class="noble_2">
							
						</div>
					</div>
					<div id="noble3">
						<div class="noble_1">
							
						</div>
						<div class="noble_2">
							
						</div>
					</div>
				</div>
				<div style="margin: 10px;font-size: 20px;"><h4>街头潮人</h4></div>
				<div id="noble">
					<div id="noble1">
						<div class="noble_1">
							
						</div>
						<div class="noble_2">
							
						</div>
					</div>
					<div id="noble2">
						<div class="noble_1">
							
						</div>
						<div class="noble_2">
							
						</div>
					</div>
					<div id="noble3">
						<div class="noble_1">
							
						</div>
						<div class="noble_2">
							
						</div>
					</div>
				</div>
				<div style="margin: 10px;font-size: 20px;"><h4>文艺复古</h4></div>
				<div id="noble">
					<div id="noble1">
						<div class="noble_1">
							
						</div>
						<div class="noble_2">
							
						</div>
					</div>
					<div id="noble2">
						<div class="noble_1">
							
						</div>
						<div class="noble_2">
							
						</div>
					</div>
					<div id="noble3">
						<div class="noble_1">
							
						</div>
						<div class="noble_2">
							
						</div>
					</div>
				</div>
				<div style="margin: 10px;font-size: 20px;"><h4>运动休闲</h4></div>
				<div id="noble">
					<div id="noble1">
						<div class="noble_1">
							
						</div>
						<div class="noble_2">
							
						</div>
					</div>
					<div id="noble2">
						<div class="noble_1">
							
						</div>
						<div class="noble_2">
							
						</div>
					</div>
					<div id="noble3">
						<div class="noble_1">
							
						</div>
						<div class="noble_2">
							
						</div>
					</div>
				</div>
			</div>
		</div>
		<div id="footer">
			
		</div>
	</body>
</html>